<template>
  <div class="message_list">
    <p class="list_title">{{title}}</p>
    <div class="list_container">
      <div v-for = "(item,index) in fieldTitles" :key="index">
        <p v-for = "(obj,index) in item" :key="index" :class="{ remarks: obj.field=='remarks', description: obj.field=='description'}" >
          <label>{{obj.name}}{{obj.name? '：':''}}</label>
          <span v-if="listData[obj.field] !== undefined" :class="{ auto: (obj.field==='remarks' || obj.field==='description') }">
            <template v-if="obj.field.indexOf('Time')>0">{{listData[obj.field] | timeFormat('YYYY-MM-DD')}}</template>
            <template v-if="obj.field.indexOf('Time')<0">{{listData[obj.field]}}</template>
          </span>
        </p>
      </div>
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      width="30%"
      center
      custom-class="workDetail_dialog mes_dialog">
      <span class="detail_center_content">{{remarksDetail}}</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MessageList',
  props: {
    title: {
      type: String
    },
    listData: {
      type: Object
    },
    index: {
      type: Number
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      remarksDetail: '',
      fieldTitles1: [
        [
          {name: '工单编号', field: 'number'},
          {name: '优先级', field: 'priorityTypeLabel'},
          {name: '计划开始时间', field: 'planStartTime'},
          {name: '计划完成时间', field: 'planEndTime'},
          {name: '追溯要求', field: 'trackDemandLabel'},
          {name: '工单状态', field: 'statusLabel'}
        ],
        [
          {name: '物料编码', field: 'materialNumber'},
          {name: '物料名称', field: 'materialName'},
          {name: '图号', field: 'drawingNumber'},
          {name: '产品型号', field: 'productNumber'},
          {name: '产品名称', field: 'productName'},
          {name: '批次号', field: 'batchNumber'}
        ],
        [
          {name: '统一号', field: 'unitedNumber'},
          {name: '单套产品数量', field: 'singleQuantity'},
          {name: '数量', field: 'planQuantity'},
          {name: '已拆分数量', field: 'spiltQuantity'},
          {name: '工单类型', field: 'workorderTypeLabel'},
          {name: '工单来源', field: 'sourceLabel'}
        ],
        [
          {name: '任务类别', field: 'taskTypeLabel'},
          {name: '进度状态', field: 'workorderProcessStatusLabel'},
          {name: '备注', field: 'remarks'}
        ]
      ],
      fieldTitles2: [
        [
          {name: '物料编码', field: 'number'},
          {name: '物料名称', field: 'name'},
          {name: '物料版本', field: 'version'},
          {name: '是否当前版本', field: 'isCurrentVersion'}
        ],
        [
          {name: '制造外购', field: 'isPurchase'},
          {name: '批次大小', field: 'type'},
          {name: '单位', field: 'unitId'},
          {name: '物料型号规格', field: 'specification'}
        ],
        [
          {name: '物料清单编号', field: 'materialInventoryNumber'},
          {name: '工艺规程编号', field: 'number'},
          {name: '物料等级', field: 'gradeId'},
          {name: '追溯要求', field: 'trackDemandId'}
        ],
        [
          {name: '制造单位', field: 'manufacturerId'},
          {name: '备注', field: 'remarks'}
        ]
      ],
      fieldTitles3: [
        [
          {name: '工艺规程编号', field: 'number'},
          {name: '工艺规程名称', field: 'name'},
          {name: '工艺版本', field: 'version'}
        ],
        [
          {name: '工艺规程类型', field: 'technologyProcedureTypeLabel'},
          {name: '物料编码', field: 'materialNumber'},
          {name: '物料名称', field: 'materialName'}
        ],
        [
          {name: '图号', field: 'drawingNumber'},
          {name: '工艺师', field: 'technologist'},
          {}
        ],
        [
          {name: '工艺规程描述', field: 'description'}
        ]
      ],
      fieldTitles: []
    }
  },
  mounted() {
    if (this.index && this.index === 1) {
      this.fieldTitles = this.fieldTitles1
    }
    if (this.index && this.index === 2) {
      this.fieldTitles = this.fieldTitles2
    }
    if (this.index && this.index === 3) {
      this.fieldTitles = this.fieldTitles3
    }
  },
  methods: {
    showRemarks(value) {
      this.centerDialogVisible = true
      this.remarksDetail = value
    }
  }
}
</script>

<style lang="less">
  .message_list{
    padding:0;
    margin-bottom: 18px;
    &:first-child .list_container div{
      height: 247px;
    }
    &:nth-child(2) .list_container div{
      height: 123.5px;
    }
    .list_title{
      margin:0;
      font-size:12px;
      color:#333;
    }
    .list_container{
      display: flex;
      padding-top:13px;
      div{
        flex:25%;
        font-size:14px;
        line-height: 28px;
        width: 25%;
        &:last-child{
          border-right:@mesBorDefault;
        }
        p{
          margin:0;
          display: flex;
          position: relative;
          line-height: 40px;
          height: 40px;
          border-top:@mesBorDefault;
          border-left: @mesBorDefault;
          &:last-child{
            border-bottom: @mesBorDefault;
          }
          &.remarks{
            height: calc(100% - 84px);
          }
          &.description{
            height:calc(100% - 2px);
          }
          label{
            color: #7e8e9f;
            display: inline-block;
            width:120px;
            text-align: right;
            background-color: #f5f5f5;
            padding-right: 2px;
          }
          span{
            color:#333;
            display: inline-block;
            width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 5px;
          }
          span.auto{
            white-space: normal;
            line-height: 20px;
            word-break: break-all;
            padding-top: 10px;
          }
          i{
            font-style:normal;
            color:#2196f3;
            position: absolute;
            left: 30%;
            bottom: -16px;
            cursor:pointer;
            display: none;
            font-size:12px;
          }
        }
      }
    }
  }
</style>
